import { useContext } from 'react';
import { useNavigate } from 'react-router-dom';
import Button from '../Button';
import { ThemeContext } from '../../context/ThemeContext';
import style from './BackButton.module.scss';

type Props = {
  label?: string;
  navigateToPath?: string;
  onClick?: () => void;
};

const BackButton = ({ label, navigateToPath, onClick }: Props) => {
  const navigate = useNavigate();
  const { IcBack } = useContext(ThemeContext).image;

  const onButtonClick = () => {
    if (onClick) {
      onClick();

      return;
    }
    if (navigateToPath) {
      navigate(navigateToPath);

      return;
    }
    navigate(-1);
  };

  return (
    <div>
      <Button appearance="text" className={style.button} onClick={onButtonClick}>
        <img src={IcBack} />
        {label || "回上一页"}
      </Button>
    </div>
  );
};

export default BackButton;
